<template>
  <div class="form-attrs">
    <el-tabs v-model="tabsValue" stretch v-if="activeId">
      <el-tab-pane label="配置" name="config">
        <el-form label-position="top">
          <el-form-item  label="字段名">
            <el-input   v-model="activeData.field"></el-input>
          </el-form-item>
          <el-form-item  label="名称">
            <el-input   v-model="activeData.label"></el-input>
          </el-form-item>
          <el-form-item v-for="(item,key) in activeData.props" :key="key" :label="item.label">
            <el-input v-if="item.type === 'input'" v-model="item.value"></el-input>
            <el-switch v-else-if="item.type === 'switch'" v-model="item.value"></el-switch>
            <el-select v-else-if="item.type === 'select'" v-model="item.value">
              <el-option
                v-for="item in item.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
<!--            <div v-else>-->
<!--              {{ item }}-->
<!--            </div>-->
          </el-form-item>
        </el-form>
        <LayoutParseArrayObject v-if="activeData.render == 'layout'" :array="activeData.layoutList"></LayoutParseArrayObject>
        <TabsParseArrayObject v-if="activeData.render == 'tabs'" :array="activeData.tabsList"></TabsParseArrayObject>
      </el-tab-pane>
      <template v-if="activeData.options">
        <el-tab-pane   label="静态数据" name="static">
          <ParseArrayObject  :array="activeData.options"></ParseArrayObject>
        </el-tab-pane>
        <el-tab-pane   label="动态数据" name="dynamic">
          <NetWorkConfig></NetWorkConfig>
        </el-tab-pane>
      </template>

    </el-tabs>
    <el-form v-else label-position="top">
      <el-form-item label="标签方向">
        <el-select v-model="formConfig.labelPosition">
          <el-option
            label="左对齐"
            value="left">
          </el-option>
          <el-option
            label="右对齐"
            value="right">
          </el-option>
          <el-option
            label="顶部对齐"
            value="top">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import ParseArrayObject from "./ParseArrayObject"
import TabsParseArrayObject from "./TabsParseArrayObject"
import LayoutParseArrayObject from "./LayoutParseArrayObject"
import NetWorkConfig from "./NetWorkConfig/index.vue";
import {mapState} from "vuex"

export default {
  name: "FormAttr",
  data() {
    return {
      tabsValue: "config"
    }
  },
  components: {
    LayoutParseArrayObject,
    TabsParseArrayObject,
    ParseArrayObject,
    NetWorkConfig
  },
  watch: {
    activeId() {
      this.tabsValue = "config"
    }
  },
  computed: {
    ...mapState({
      layouts: state => state.formGen.layouts,
      activeId: state => state.formGen.activeId,
      activeData: state => state.formGen.activeData,
      formConfig: state => state.formGen.formConfig,
    })
  }
}
</script>
<style scoped lang="scss">
.form-attrs {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px;
}
</style>
